﻿<div class="@ClassName" style="@stackStyle">
    @ChildContent
</div>

@code {
    [Parameter] public string Orientation { get; set; } = "vertical";
    [Parameter] public string AlignItems { get; set; } = "start";
    [Parameter] public string JustifyContent { get; set; } = "start";
    [Parameter] public string Gap { get; set; } = "8";
    [Parameter] public string FlexWrap { get; set; } = "nowrap";
    [Parameter] public string Width { get; set; }
    [Parameter] public string Height { get; set; }
    [Parameter] public string ClassName { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public string AlignSelf { get; set; }

    private string stackStyle => $"display: flex; flex-direction: {currentOrientation}; align-items: {AlignItems}; justify-content: {JustifyContent}; gap: var(--mp-size-{Gap}); flex-wrap: {FlexWrap}; width: {Width}; height: {Height}; align-self: {AlignSelf};";
    private string currentOrientation => Orientation == "vertical" ? "column" : "row";
}
